import React from 'react'
import withRouter from '../utils/withRouter'
import { NavBar, Toast ,ProductCard,ActionBar} from 'react-vant';
import { CartO, StarO, Star} from '@react-vant/icons';
import {useDispatch} from "react-redux"
import * as api from "../api/index"
import {useSelector} from "react-redux"

function Details({router}) {
  console.log(router);
  const dispatch = useDispatch()
  const childrenData = useSelector(state=>state.reducer.childrenData.filter(item => item.id === router.params.id))
  console.log(childrenData);

  const add_shopCar = () => {
    dispatch(api.add_shopCar(router.params.id))
  }

  const set_like = () => {
    dispatch(api.set_like(router.params.id))
  }
  return (
    <div>
       <NavBar
        title="详情页"
        leftText="返回"
        onClickLeft={() => router.navigate(-1)}
        onClickRight={() => Toast('按钮')}
      />
      <ProductCard
          price={router.location.state.price}
          desc={router.location.state.type}
          title={router.location.state.title}
          thumb={router.location.state.img}
      />
      <div className='demo-action-bar'>
        <ActionBar>
          <ActionBar.Icon icon={<CartO />} text="购物车" onClick={() => add_shopCar()} />
          <ActionBar.Icon icon={childrenData[0].like?<Star color='red' />: <StarO  />} text={childrenData[0].like?"已收藏": "收藏"} onClick={() => set_like()} />
          <ActionBar.Button color='green' type="danger" text="立即购买" onClick={() => console.log('button click')} />
        </ActionBar>
      </div>
    </div>
  )
}

export default withRouter(Details)